/**
 * 防抖
 * 监听一个输入框，文字变化后触发 change 事件
 * 直接用 keyup 事件，则会频繁触发 change 事件
 * 防抖：用户输入结束或暂停时，才会触发 change 事件
 * 方案: keyup事件 + setTimneout
 */
const input1 = document.getElementById("input1");

function debounce(fn, delay = 100) {
  let timer = null;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = null;
    }, delay);
  };
}

input1.addEventListener(
  "keyup",
  debounce(() => {
    console.log(input1.value);
  }, 500)
);

/**
 * 节流
 * 拖拽一个元素时，要随时拿到该元素被拖拽的位置
 * 直接用 drag 事件，则会频繁触发，容易造成卡顿
 * 节流：物流拖拽速度多快，都会间隔事件触发一次
 */

const div1 = document.getElementById("div1");
function throttle(fn, delay = 100) {
  let timer = null;
  return function () {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = null;
    }, delay);
  };
}

div1.addEventListener(
  "drag",
  throttle(function (e) {
    console.log(e.offsetX, e.offsetY);
  }, 300)
);
